<template>
  <div class="app">
    <div class="box">
      <!-- 标题导航栏 -->
      <div class="box_title">
        <div class="box_logo">
          <div class="logo_mid_img">
            <router-link to="/">
              <img src="../assets/images/logo/xiaobaishop_0.png" />
            </router-link>
          </div>
        </div>
        <div class="box_title_les">
          <a href="">
            <span class="box_title_top box_title_top_1">0元开店</span>
          </a>
          <a href="">
            <span class="box_title_top">开店教程</span>
          </a>
          <a href="">
            <span class="box_title_top">常见问题</span>
          </a>
        </div>
      </div>

      <!--开店主体部分 -->
      <div class="operstor">
        <div class="operstor_main_txt">小白&nbsp;0&nbsp;元开店</div>
        <div class="operstor_min_txt">让天下没有难做的生意</div>

        <div class="opserstor_botton">
          <div class="oper_botton">
            <el-button
              class="oper_button_public"
              @click="drawer = true"
              type="primary"
              round
              >个人开店&nbsp;&nbsp;&nbsp;></el-button
            >
            <el-button
              class="oper_button_public"
              @click="drawere = true"
              type="primary"
              round
              >企业开店&nbsp;&nbsp;&nbsp;></el-button
            >
          </div>
        </div>
      </div>
      <!-- 右侧抽屉 -->

      <!-- 个人注册抽屉 -->
      <div class="box_drawer">
        <el-drawer
          :visible.sync="drawer"
          :direction="direction"
          :before-close="handleClose"
          size="600px"
        >
          <!-- 主体外面盒子 -->
          <div class="box_drawer_external">
            <!-- 抽屉主体部分 -->
            <div class="box_drawer_border">
              <!-- 标题 -->
              <div class="box_drawer_title">
                <div class="box_drawer_title_item">
                  <svg
                    t="1652236618528"
                    class="icon_p"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="8344"
                    width="200"
                    height="200"
                  >
                    <path
                      d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
                      fill="#FDEBED"
                      p-id="8345"
                    ></path>
                    <path
                      d="M727.04 737.28H293.12c5.12-87.04 61.44-162.56 143.36-192-66.56-40.96-87.04-126.72-47.36-193.28 40.96-66.56 126.72-87.04 193.28-47.36 66.56 40.96 87.04 126.72 47.36 193.28-11.52 19.2-28.16 35.84-47.36 47.36 83.2 29.44 139.52 104.96 144.64 192z"
                      fill="#FF5000"
                      p-id="8346"
                      data-spm-anchor-id="a313x.7781069.0.i11"
                      class="selected"
                    ></path>
                  </svg>
                </div>
                <span class="box_drawer_title_item">个人开店</span>
              </div>
              <div class="box_from">
                <!-- 表单 -->
                <el-form
                  :label-position="labelPosition"
                  label-width="90px"
                  :model="formLabelAlign"
                >
                  <el-form-item label="店铺名称">
                    <el-input
                      class="box_input"
                      v-model="formLabelAlign.name"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <el-input
                      class="box_input"
                      v-model="formLabelAlign.region"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="验证码">
                    <el-input
                      class="box_input_code"
                      v-model="formLabelAlign.type"
                    >
                    </el-input>
                    <el-button
                      class="box_input_code_button button_public"
                      type="primary"
                      round
                      >发送验证码</el-button
                    >
                  </el-form-item>

                  <div class="box_checkbox">
                    <input type="checkbox" class="box_checkbox_input" />

                    <span class="box_checkbox_txt"
                      >已阅读并同意以下协议小白平台服务协议、隐私权政策、法律声明、消费者保障服务协议、支付服务协议</span
                    >
                  </div>
                  <div class="box_add_button">
                    <el-button
                      class="add_button button_public"
                      type="primary"
                      round
                      >0元开店</el-button
                    >
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>

      <!-- 企业注册抽屉 -->
      <div class="box_drawer">
        <el-drawer
          :visible.sync="drawere"
          :direction="direction"
          :before-close="handleClose"
          size="600px"
        >
          <!-- 主体外面盒子 -->
          <div class="box_drawer_external">
            <!-- 抽屉主体部分 -->
            <div class="box_drawer_border">
              <!-- 标题 -->
              <div class="box_drawer_title">
                <div class="box_drawer_title_item">
                  <svg
                    t="1652275960634"
                    class="icon_p"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7415"
                    width="32"
                    height="32"
                  >
                    <path
                      d="M912 912H112v-55h68V132a20 20 0 0 1 20-20h389a20 20 0 0 1 20 20v290h215a20 20 0 0 1 20 20v415h68v55zM507 213a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m0 188a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m0 188a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m0 179a20 20 0 0 0-20-20H302a20 20 0 0 0-20 20v42a20 20 0 0 0 20 20h185a20 20 0 0 0 20-20v-42z m285-264a20 20 0 0 0-20-20H633a20 20 0 0 0-20 20v16a20 20 0 0 0 20 20h139a20 20 0 0 0 20-20v-16z m0 130a20 20 0 0 0-20-20H633a20 20 0 0 0-20 20v16a20 20 0 0 0 20 20h139a20 20 0 0 0 20-20v-16z m0 147a20 20 0 0 0-20-20H633a20 20 0 0 0-20 20v16a20 20 0 0 0 20 20h139a20 20 0 0 0 20-20v-16z"
                      fill="#FF5000"
                      p-id="7416"
                    ></path>
                  </svg>
                </div>
                <span class="box_drawer_title_item">企业开店</span>
              </div>
              <div class="box_from">
                <!-- 表单 -->
                <el-form
                  :label-position="labelPosition"
                  label-width="90px"
                  :model="formLabelAlign"
                >
                  <el-form-item label="店铺名称">
                    <el-input
                      class="box_input"
                      v-model="formLabelAlign.name"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱账号">
                    <el-input
                      class="box_input"
                      v-model="formLabelAlign.emall"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <el-input
                      class="box_input"
                      v-model="formLabelAlign.region"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="验证码">
                    <el-input
                      class="box_input_code"
                      v-model="formLabelAlign.type"
                    >
                    </el-input>
                    <el-button
                      class="box_input_code_button button_public"
                      type="primary"
                      round
                      >发送验证码</el-button
                    >
                  </el-form-item>

                  <div class="box_checkbox">
                    <input type="checkbox" class="box_checkbox_input" />

                    <span class="box_checkbox_txt"
                      >已阅读并同意以下协议小白平台服务协议、隐私权政策、法律声明、消费者保障服务协议、支付服务协议</span
                    >
                  </div>
                  <div class="box_add_button">
                    <el-button
                      class="add_button button_public"
                      type="primary"
                      round
                      >0元开店</el-button
                    >
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </el-drawer>
      </div>

      <div class="bxo_bottom"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
        emall: "",
      },
      drawer: false,
      drawere: false,
    };
  },

  methods: {
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style>
.bxo_bottom {
  margin-top: 10%;
  height: 367px;
  width: auto;
  background-image: url("../assets/images/opersbottom.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 0px;
}

.add_button {
  width: 360px;
  height: 100%;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}

.box_add_button {
  margin-top: 30%;
  height: 46px;
}

.box_checkbox {
  margin-top: 60px;
}

.box_checkbox_txt {
  width: 400px;
  margin-left: 15px;
}

.box_checkbox {
  float: left;
  height: 50px;
  margin-top: 20px;
}

.box_input_code_button {
  float: right;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}

.box_input_code {
  float: left;
  width: 160px;
}

.box_from {
  margin-top: 40px;
}

.icon_p {
  width: 39px;
  height: 39px;
  margin-bottom: 6px;
}

.box_drawer_title {
  height: 66px;
  width: auto;
  background-color: white;
  margin-bottom: 12px;
}

.box_drawer_external {
  width: 66%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

.button_public:hover {
  background-color: #ff5000;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}

.button_public:focus {
  background-color: #ff5000;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}

.oper_button_public:hover {
  background-color: #ff5000;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}

.oper_button_public:focus {
  background-color: #ff5000;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}
.oper_button_public {
  border: unset;
  width: 160px;
  height: 50px;
  font-size: 16px;
  margin: 58px 50px;
  background-color: #ff5000;
  background: linear-gradient(90deg, #ff5000, #ff6f06);
}

.oper_botton {
  margin: 0 auto;
}

.opserstor_botton {
  margin-top: 12px;
  height: 80px;
}

.operstor_min_txt {
  margin-top: 10px;
  font-size: 24px;
  opacity: 0.7;
}

.operstor_main_txt {
  margin-top: 30px;
  line-height: 90px;
  font-size: 64px;
  color: white;
  font-weight: 600;
}

.box_title_top_1 {
  color: #ff5000;
  border-bottom: 3px solid #ff5000;
}

.box_title_top {
  margin-top: 22px;
  float: left;
  margin-left: 50px;
  font-size: 16px;
  font-weight: 400;
  /* border-bottom: 2px solid #FF5000; */
}

img {
  width: 126px;
  height: 76px;
}

.box_logo {
  float: left;
  margin-left: 9%;
}

.box_title {
  height: 90px;
}
/* .box_public {
  position: fixed;
  float: left;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: -1;
} */

.box {
  width: auto;
  height: 520px;
  text-align: center;

  background-image: url("https://img.alicdn.com/tfs/TB19J.vAbH1gK0jSZFwXXc7aXXa-1290-860.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px 0px;
  opacity: 1; /* 设置透明度     */
  /* color: rgb(87, 84, 78); */
}

a:hover {
  color: #ff5000;
}
</style>